<template>
  <view v-if="!loading" class="main">
    <view class="cont">
      <view class="name">{{ detailData.productName }}</view>
      <view class="article">
        <div class="title">保障详情:</div>
        <div v-for="item in detailData.supportConcept" :key="item.articleId" class="a-item" @click="lookArticle(item)">
          {{ item.articleName }}
        </div>
      </view>
      <view class="info">
        <view class="left">保障状态：</view>
        <view class="right">{{ detailData.status | formatStatus }}</view>
      </view>
      <view class="info">
        <view class="left">被保人：</view>
        <view class="right">{{ detailData.insuredName }}</view>
      </view>
      <view class="info">
        <view class="left">保险期限：</view>
        <view v-if="detailData.startDate" class="right"
          >{{ detailData.startDate | formatDate }} - {{ detailData.endDate | formatDate }}</view
        >
        <view v-else class="right">暂无</view>
      </view>
      <view class="info">
        <view class="left">承保公司：</view>
        <view class="right">{{ detailData.companyName }}</view>
      </view>

      <view class="info">
        <view class="left">凭证编号：</view>
        <view v-if="detailData.policyNo" class="right">{{ detailData.policyNo }}</view>
      </view>
      <view class="info">
        <!-- 只有已完成才显示以下两个按钮 -->
        <view
          v-if="detailData.status === 3 && detailData.pdfUrl"
          class="f-btn f-btn-orange"
          @click="checkPdf(detailData.pdfUrl)"
        >
          <view>查看保单电子凭证</view>
        </view>
        <view v-if="detailData.status === 3" class="f-btn" @click="goIllForm">
          <!-- <view v-if="relationWithInsurerArr.length"> 继续加入 </view> -->
          <view>理赔服务</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getInsureDetail } from '@/api/service.js';

export default {
  name: 'InsuranceList',
  filters: {
    formatDate(date) {
      if (date) {
        return date.split(' ')[0];
      }
    },
    formatStatus(status) {
      // 保障状态除了1-2 ，其他都显示已失效

      // let statusObj = {
      //   0: '待激活',
      //   1: '已承保',
      //   3: '已完成',
      //   4: '待退保',
      //   5: '已退保',
      //   8: '投保失败',
      //   9: '已撤单',
      //   10: '已出险'
      // };
      let statusObj = {
        0: '保障中',
        1: '保障中',
        3: '已失效',
        4: '已失效',
        5: '已失效',
        8: '已失效',
        9: '已失效',
        10: '已失效'
      };

      if (status >= 0) {
        return statusObj[status];
      }
    }
  },

  data() {
    return {
      detailData: {},
      loading: true
    };
  },
  onLoad(option) {
    console.log('option:', option);
    this.patientId = this.$store.state.join.patientid;
    let id = 1946;
    if (option) {
      id = option.id;
    }
    if (id) {
      getInsureDetail(id).then((res) => {
        if (res.code === 0) {
          this.detailData = res.data;
        }
        this.loading = false;
      });
    }
  },
  methods: {
    link(id) {
      this.$wxPromise.navigateTo({
        url: '/pages/agreementReading/index?articleId=' + id
      });
    },
    lookArticle(data) {
      if (data.articleId && data.articleName) {
        this.link(data.articleId);
        return false;
      }
      // 外链
      const links = data.externalLink;
      let externalLinkDomain = links.split('/')[2].split('.').join('');
      uni.navigateTo({
        url: `pages/view/outer-view?externalLinkDomain=${externalLinkDomain}&url=${links}`
      });
    },
    checkPdf(pdfUrl) {
      if (pdfUrl) {
        this.$wxPromise.navigateTo({
          url: '/pages/view/web-view?url=' + pdfUrl
        });
      } else {
        uni.showToast({
          title: '保险凭证暂时不存在'
        });
      }
    },
    goIllForm() {
      this.$wxPromise.navigateTo({
        url: '/pages/getWelfareGold/illnessForm'
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  padding-top: 24rpx;
  .cont {
    width: 700rpx;
    margin: auto;
    border-radius: 24rpx;
    background: #ffffff;
    padding: 36rpx 24rpx;
    box-sizing: border-box;
    position: relative;
    color: rgba(0, 0, 0, 0.55);
    .name {
      font-size: 36rpx;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.9);
    }
    .article {
      margin-top: 20rpx;
      .a-item {
        color: #2680eb;
        cursor: pointer;
        margin-top: 10px;
        font-size: 26rpx;
      }
    }
    .info {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        width: 200rpx;
        flex-shrink: 0;
      }
      .right {
        flex-shrink: 0;
        width: 500rpx;
      }
      .f-btn {
        width: 300rpx;
        height: 72rpx;
        line-height: 72rpx;
        background: linear-gradient(to left, #10aeff 0%, #2680eb 100%);

        border-radius: 36rpx;
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        margin: 20rpx auto;
        &.f-btn-orange {
          background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
        }
      }
    }
  }
}
</style>
